<template>
  <div id="login" style="background-image: url('../assets/images/login.jpg')">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="d-ruleForm">
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      var validateUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          // if (this.ruleForm.username !== 'admin') {
          //   this.$refs.ruleForm.validateField('username');
          // }

          console.log("账号" + value)
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          // if (this.ruleForm.password !== 'admin') {
          //   this.$refs.ruleForm.validateField('password');
          // }
          console.log("密码：" + value)
          callback();
        }
      };
      return {
        ruleForm: {
          username: '',
          password: ''
        },
        checkResult: 0,
        rules: {
          username: [
            {validator: validateUsername, trigger: 'blur'}
          ],
          password: [
            {validator: validatePass, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.checkUser(this.ruleForm.username, this.ruleForm.password)
            console.log("0000000" + this.checkResult)
          } else {
            // console.log('error submit!!');
            this.$message.error('错了哦，这是一条错误消息');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      checkUser(username, pwd) {
        // this.$http.get("http://localhost:3000/users?username=" + username + "&password=" + pwd).then((data) => {
        //   console.log("444"+data.body.length > 0)
        //   this.checkResult = data.body
        //
        // })
        let _this = this;
        let user = {"userName": username, "password": pwd};
        let postData=this.$qs.stringify(user)
        this.$axios({
          url: "/user/checkLogin",
          method: "post",
          data: postData
        }).then(function (data) {
          console.log(data)
          _this.checkResult = data.data.code
          // 判断是否登录成功
          if (data.data.code === 200) {
            _this.$message({
              message: '恭喜你，这是一条成功消息',

              type: 'success'
            });
            _this.$router.push({path: '/index'})
          } else {
            _this.$message.error('错了哦，这是一条错误消息');
            return false;
          }
        })
      }
    }
  }

</script>

<style scoped>
  .d-ruleForm {
    width: 500px;
  }
</style>
